<template>
	<xbd-pages-content title="订单详情">
		<template #content>
			<view>
				<view class="state">
					<view v-if="detail.task_state === 0">
						<image class="img" src="@/static/images/deliveryorder/await.png" mode=""></image>
						<view class="">正在前往取物</view>
					</view>
					<view v-else-if="detail.task_state === 1">
						<image class="img" src="@/static/images/deliveryorder/distribution.png" mode=""></image>
						<view class="">订单配送中！</view>
					</view>
					<view v-else-if="detail.task_state === 3">
						<image class="img" src="@/static/images/deliveryorder/cancel.png" mode=""></image>
						<view class="">订单已取消！</view>
					</view>
					<view v-else-if="detail.task_state === 2">
						<image class="img" src="@/static/images/deliveryorder/success.png" mode=""></image>
						<view class="">订单已完成！</view>
					</view>
					<view v-if="detail.task_state === 0" :class="['button', btColor? 'cencelBt':'']" @click="cancle">
						取消召唤
					</view>
					<xbd-popup :isShow="showDialog" @dialogConfirm="dialogConfirm" @dialogCancel="dialogCancel"
						content="确定取消召唤吗？" cancelText="再等等" confirmText="确定">
					</xbd-popup>
					<view class="state_foot">
						<view class="box bor">
							<view class="number">{{ detail.task_start_code }}</view>
							<view class="">
								开箱码
							</view>
						</view>
						<view class="box bor">
							<view v-if="detail.task_need_pick_verify === false" class="number">
								{{ detail.task_end_code }}</view>
							<view v-else class="text">无验证</view>
							<view class="">
								取件
							</view>
						</view>
					</view>
				</view>
				<view class="content">
					<view class="content_top">
						<view class="box">
							<view class="number">{{
                detail.task_start_floor + "-" + detail.task_start_station
              }}</view>
							<view class="">
								取物站点
							</view>
						</view>
						<image class="img" src="@/static/images/deliveryorder/bubble-right.png" mode=""></image>
						<view class="box">
							<view class="number">{{
                detail.task_end_floor + "-" + detail.task_end_station
              }}</view>
							<view class="">
								送物站点
							</view>
						</view>
					</view>
					<view class="content_take">
						<view class="type">
							<view class="">
								取物站点
							</view>
							<view class="right">
								{{
                  detail.task_start_subarea +
                    "-" +
                    detail.task_start_floor +
                    "-" +
                    detail.task_start_station
                }}
							</view>
						</view>
						<view class="type">
							<view class="">
								停留时长
							</view>
							<view class="right">
								{{ detail.task_start_duration + "min" }}
							</view>
						</view>
						<view class="type">
							<view class="">
								站点联系人手机号
							</view>
							<view class="right">
								{{ detail.task_start_phone }}
							</view>
						</view>
					</view>
					<view class="content_take">
						<view class="type">
							<view class="">
								送物站点
							</view>
							<view class="right">
								{{
                  detail.task_end_subarea +
                    "-" +
                    detail.task_end_floor +
                    "-" +
                    detail.task_end_station
                }}
							</view>
						</view>
						<view class="type">
							<view class="">
								停留时长
							</view>
							<view class="right">
								{{ detail.task_end_duration + "min" }}
							</view>
						</view>
						<view class="type">
							<view class="">
								站点联系人手机号
							</view>
							<view class="right">
								{{ detail.task_end_phone }}
							</view>
						</view>
					</view>
					<view class="content_take">
						<view class="type">
							<view class="">
								订单编号
							</view>
							<view class="right">
								{{ detail.task_id }}
							</view>
						</view>
						<view class="type">
							<view class="">
								下单时间
							</view>
							<view class="right">
								{{ detail.created_at | timeFormat("YYYY-MM-DD HH:mm:ss") }}
							</view>
						</view>
						<view class="type">
							<view class="">
								预约时间
							</view>
							<view class="right">
								<view v-if="detail.task_reservation_immediate === true">
									立即发出
								</view>
								<view v-else>
									--
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import {
		DeliveryOrder
	} from '@/api/index.js';
	export default {
		data() {
			return {
				btColor: false,
				type: '',
				windowHeight: 0,
				showDialog: false,
				id: '',
				detail: {}
			}
		},
		methods: {
			cancle() {
				this.showDialog = true;
				this.btColor = true
			},
			async dialogConfirm() {
				//弹出框再等等操作
				const o = {
					id: this.detail.task_id
				}
				try {
					this.$showLoading('加载中');
					const res = await DeliveryOrder.postCencel(o);

					uni.hideLoading();
					this.showDialog = false;
					if(res.success){
						this.detail.task_state = 3
						uni.$emit('cencelGo', {
							id: this.id,
							state: 3
						});
					}else{
						this.btColor = false
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					
				} catch (e) {
					uni.hideLoading();
				}
			},
			dialogCancel() {
				this.showDialog = false;
				this.btColor = false

			},

			async getDetail() {
				try {
					this.$showLoading('加载中');
					const res = await DeliveryOrder.getDetails(this.id);
					uni.hideLoading();

					this.detail = res.data.detail
				} catch (e) {
					uni.hideLoading();
				}
			},

		},

		onLoad(res) {
			this.id = res.id
			this.getDetail()
		},

	}
</script>

<style lang="scss" scoped>
	.state {
		width: 750rpx;
		height: 580rpx;
		box-sizing: border-box;
		padding: 40rpx 0;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		.img {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}

		.button {
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 76rpx;
			width: 240rpx;
			height: 80rpx;
			border-radius: 40rpx;
			box-sizing: border-box;
			border: 2rpx solid #457aff;
			color: #457aff;
			font-size: 32rpx;
		}

		.cencelBt {
			border: 2rpx solid #999999 !important;
			color: #999999 !important;
		}

		.state_foot {
			display: flex;

			// margin-top: 140rpx;
			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 375rpx;
				height: 100rpx;
				font-size: 28rpx;
				color: #999999;

				.number {
					height: 56rpx;
					font-size: 40rpx;
					color: #f59f54;
					margin-bottom: 10rpx;
				}

				.text {
					height: 56rpx;
					margin-bottom: 10rpx;
				}
			}

			.bor {
				box-sizing: border-box;
				border-right: 1px solid #e8e8e8;
			}
		}
	}

	.content {
		width: 750rpx;
		box-sizing: border-box;
		padding: 40rpx;
		background-color: #ffffff;
		margin-top: 20rpx;

		.content_top {
			box-sizing: border-box;
			padding: 20rpx 0;
			display: flex;

			.img {
				width: 100rpx;
				height: 100rpx;
			}

			.box {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 285rpx;
				height: 100rpx;
				font-size: 28rpx;
				color: #999999;

				.number {
					height: 56rpx;
					font-size: 40rpx;
					color: #f59f54;
					margin-bottom: 10rpx;
				}
			}
		}

		.content_take {
			box-sizing: border-box;
			padding-top: 20rpx;
			border-top: 1px solid #e8e8e8;

			.type {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #bbc0c9;

				.right {
					color: #394954;
				}
			}
		}
	}
</style>
